<template>
  <div class="visual-operation-wrap">
    <Dropdown trigger="click" placement="bottom-start" @on-click="handleChangeFunc">
      <Button type="primary" size="small" :disabled="!showBtn">
        可视化操作
        <Icon type="ios-arrow-down"></Icon>
      </Button>
      <DropdownMenu slot="list">
        <DropdownItem v-for="item in showList" :name="item.value" :key="item.value">{{ item.label }}</DropdownItem>
      </DropdownMenu>
    </Dropdown>
    <!-- 去除异常实体 -->
    <Modal
      class="modal-p10"
      v-model="ycstVisible"
      title="去除异常实体"
      width="360"
      @on-cancel="handleCancelSolidCancel"
    >
      <Form ref="ycstForm" :model="ycstForm" :rules="ycstFormRules" label-position="top">
        <FormItem label="正常值下限" prop="min">
          <InputNumber ref="ycstFormMin" autofocus v-model="ycstForm.min" placeholder="数值" style="width:100%" />
        </FormItem>
        <FormItem label="正常值上限" prop="max">
          <InputNumber ref="ycstFormMax" v-model="ycstForm.max" placeholder="数值" style="width:100%" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="primary" :loading="cancelSolidLoading" @click="handleCancelSolidOk">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { createNamespacedHelpers } from 'vuex'
import { mainMixins } from '../mixins'

const { mapState, mapActions } = createNamespacedHelpers('historyVerify')

export default {
  name: 'history-verify-visual-operation',
  mixins: [mainMixins],
  data() {
    const validateMin = (rule, value, callback) => {
      const { max } = this.ycstForm
      if (max < value) {
        callback(new Error('最小值不能大于最大值'))
      } else {
        this.$refs['ycstFormMax'].blur()
        callback()
      }
    }
    const validateMax = (rule, value, callback) => {
      const { min } = this.ycstForm
      if (min > value) {
        callback(new Error('最大值不能大于最小值'))
      } else {
        this.$refs['ycstFormMin'].blur()
        callback()
      }
    }
    return {
      funcToolList: {
        qcyx: this.handleRemoveLeads,
        hyqcyx: this.handleRemoveLeadsRollBack,
        qcstyc: this.handleCancelSolid,
        hyqcstyc: this.handleCancelSolidRollBack,
        gllyq: () => this.handleShowZero(true),
        hygllyq: () => this.handleShowZero(false),
        yclyqsj: () => this.handleLyqsj(true),
        xslyqsj: () => this.handleLyqsj(false),
        yclyqqx: () => this.handleLyqsjqx(true),
        xslyqqx: () => this.handleLyqsjqx(false)
      },
      ycstForm: {
        min: 0,
        max: 0
      },
      ycstVisible: false,
      ycstFormRules: {
        min: [{ validator: validateMin, trigger: 'blur' }],
        max: [{ validator: validateMax, trigger: 'blur' }]
      },
      cancelSolidLoading: false
    }
  },
  computed: {
    ...mapState([
      'hasRemoveLines',
      'hasRemoveSolid',
      'currentMeterId',
      'showZero',
      'spareGas',
      'spareGasLine'
    ]),
    toolList() {
      return [
        {
          label: '去除影线',
          value: 'qcyx',
          active: !this.hasRemoveLines
        },
        {
          label: '还原影线',
          value: 'hyqcyx',
          active: this.hasRemoveLines
        },
        {
          label: '去除异常实体',
          value: 'qcstyc',
          active: !this.hasRemoveSolid
        },
        {
          label: '还原异常实体',
          value: 'hyqcstyc',
          active: this.hasRemoveSolid
        },
        {
          label: '高亮零用气',
          value: 'gllyq',
          active: !this.showZero
        },
        {
          label: '还原高亮零用气',
          value: 'hygllyq',
          active: this.showZero
        },
        {
          label: '隐藏零用气数据',
          value: 'yclyqsj',
          active: !this.spareGas
        },
        {
          label: '显示零用气数据',
          value: 'xslyqsj',
          active: this.spareGas
        },
        {
          label: '隐藏零用气曲线',
          value: 'yclyqqx',
          active: !this.spareGasLine
        },
        {
          label: '显示零用气曲线',
          value: 'xslyqqx',
          active: this.spareGasLine
        }
      ]
    }
  },
  methods: {
    ...mapActions([
      'changeHasRemoveLines',
      'changeStopTableKeyUp',
      'changeHasNearAnomaly',
      'changeQCYCSTFrom',
      'changeHasRemoveSolid',
      'changeShowZero',
      'changeSpareGas',
      'changeSpareGasLine'
    ]),
    handleRemoveLeads() {
      if (!this.currentMeterId) {
        return this.$Notice.warning({
          title: '操作提示',
          desc: '没有可操作的数据'
        })
      }
      this.changeHasRemoveLines(true)
    },
    handleRemoveLeadsRollBack() {
      this.changeHasRemoveLines(false)
    },
    handleCancelSolid() {
      if (!this.currentMeterId) {
        return this.$Notice.warning({
          title: '操作提示',
          desc: '没有可操作的数据'
        })
      }
      this.cancelSolidLoading = false
      this.changeStopTableKeyUp(true)
      this.ycstVisible = true
    },
    handleCancelSolidCancel() {
      this.changeStopTableKeyUp(false)
      this.ycstVisible = false
      this.$refs['ycstForm'].resetFields()
    },
    handleCancelSolidOk() {
      this.cancelSolidLoading = true
      this.$refs['ycstForm'].validate(valid => {
        if (valid) {
          this.changeHasRemoveSolid(true)
          this.changeQCYCSTFrom(this.ycstForm)
          this.handleCancelSolidCancel('ycstForm')
        } else {
          this.cancelSolidLoading = false
        }
      })
    },
    handleCancelSolidRollBack() {
      this.changeHasRemoveSolid(false)
      this.changeHasNearAnomaly(false)
    },
    handleShowZero(flag) {
      this.changeShowZero(flag)
    },
    handleLyqsj(flag) {
      this.changeSpareGas(flag)
    },
    handleLyqsjqx(flag) {
      this.changeSpareGasLine(flag)
    }
  }
}
</script>
<style lang="less">

</style>
